import React, { Component } from 'react'
import {Route} from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'
import MyNavLink from './components/MyNavLink'
import Header from './components/Header'

export default class App extends Component {
	render() {
		return (
			<div>
				<div className="row">
					<div className="col-xs-offset-2 col-xs-8">
						<Header a="1"/>
					</div>
				</div>
				<div className="row">
					<div className="col-xs-2 col-xs-offset-2">
						<div className="list-group">

							{/* 原生html中我们通过a标签实现：多个页面的跳转 */}
							{/* <a className="list-group-item" href="./about.html">About</a> */}
							{/* <a className="list-group-item" href="./home.html">Home</a> */}

							{/* react中我们通过Link标签实现：路径的改变，进而引起不同组件的切换 */}
							{/* <NavLink className="list-group-item" activeClassName="atguigu" to="/about">About</NavLink> */}
							{/* <NavLink className="list-group-item" activeClassName="atguigu" to="/home">Home</NavLink> */}

							<MyNavLink to="/atguigu/about">About</MyNavLink>
							<MyNavLink to="/atguigu/home">Home</MyNavLink>
							
						</div>
					</div>
					<div className="col-xs-6">
						<div className="panel">
							<div className="panel-body">
								{/* 制定路由具体规则 */}
								<Route path="/atguigu/about" component={About}/>
								<Route path="/atguigu/home" component={Home}/>
							</div>
						</div>
					</div>
				</div>
			</div>
		)
	}
}
